<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品查询</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/goodslist.css"/>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
</head>
<body>
    <div class="container" id="returnindex">
        <div class="row">
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="goodsmanage"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="ordermanage"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"><a href="index.html">返回首页</a></div>
        </div>
    </div>
    <div class="container" id="top">
        <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="logo">乐享生活</div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
            <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7" id="search">
                <div id="type"><button class="type_choise" id="searchgoods">商品</button><button class="type_unchoise" id="searchshop">店铺</button></div>
                <input type="text" id="search_what"/><button id="search_btn">搜索</button>
            </div>
        </div>
    </div>

    <div class="container" id = "goodslisttitle">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10" id="listtitle">
                <p>所有商品</p>
            </div>
        </div>
    </div>

    <div class="container" id="goodslistbody"></div>



    <script type="text/javascript">
        $("#searchshop").click(function () {
            $("#searchshop").addClass("type_choise");
            $("#searchshop").removeClass("type_unchoise");

            $("#searchgoods").addClass("type_unchoise");
            $("#searchgoods").removeClass("type_choise");
        });

        $("#searchgoods").click(function () {

            $("#searchgoods").addClass("type_choise");
            $("#searchgoods").removeClass("type_unchoise");

            $("#searchshop").addClass("type_unchoise");
            $("#searchshop").removeClass("type_choise");
        });


        $("#search_btn").click(function () {
            var what = $("#search_what").val();

            if ($("#searchgoods").hasClass("type_choise")){
                location.href = "goodslist.html?search=" + what + "&page=1";
            }

            if ($("#searchshop").hasClass("type_choise")) {
                location.href = "shoplist.html?search=" + what + "&page=1";
            }
        });


        var what = decodeURIComponent(location.search.split("=")[1].split("&")[0]);

        var page = location.search.split("=")[2];

        $.post("goods/getGoodsList",{what:what,page:page,pageSize:24},function (data) {
            data =  JSON.parse(data);

            var ht = '';

            for (var i = 1; i <= Math.ceil((data.goods.length/6)); i++) {

                ht += '<div class="row goodsrow">\n' +
                    '       <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>\n' +
                    '       <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">\n' +
                    '           <div class="row">\n';

                for (var j = (i-1)*6; j < i*6 && j < data.goods.length; j++) {

                    ht += '<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 divclick" id="divclick_'+ data.goods[j].id +'">\n' +
                        '       <img src="/FVOnline/goods/getImg?goodsId='+ data.goods[j].id +'">\n' +
                        '       <p class="price">￥'+ data.goods[j].price +'<span>'+ data.goods[j].sellnum +'人付款</span></p>\n' +
                        '       <a class="details" href="goodsdetails.html?goodsid='+ data.goods[j].id +'">'+ data.goods[j].goodsname +'&nbsp;&nbsp;'+ data.goods[j].details +'</a><br>\n' +
                        '       <a class="shop" href="shopdetails.html?shopid='+ data.goods[j].shopid +'&page=1">'+ data.goods[j].shop.shopname +'</a>' +
                        '  </div>\n';
                }

                ht += '     </div>\n' +
                    '   </div>\n' +
                    '</div>\n';
            }

            ht += '<div id="pageinfo">共'+ Math.ceil(data.total/8) +'页，当前为第'+ page +'页<button id="prev">上一页</button><button id="next">下一页</button>第<input type="text" id="pageto" oninput = "value = value.replace(/[^\\d]/g,\'\')")>页<button id="goto">跳转</button></div>'

            $("#goodslistbody").html(ht);

            for (var i = 0; i < data.goods.length; i++) {
                $("#divclick_" + data.goods[i].id).click(function () {
                    var id = this.id.split("_")[1];
                    location.href = "goodsdetails.html?goodsid=" + id;
                });
            }

            $("#prev").click(function () {
                if (page != 1){
                    location.href = "shopdetails.html?shopid=" + shopid + "&page=" + (parseInt(page) - 1);
                }
            });

            $("#next").click(function () {
                if (page != Math.ceil(data.total/8)){
                    location.href = "shopdetails.html?shopid=" + shopid + "&page=" + (parseInt(page) + 1);
                }
            });

            $("#goto").click(function () {
                var topage = $("#pageto").val()
                if (topage > 0 && topage <= Math.ceil(data.total/8)) {
                    location.href = "shopdetails.html?shopid=" + shopid + "&page=" + topage;
                }
            });
        });


    </script>

</body>
</html>